<template>
  <div>
    <div class="out-margin" v-if="this.$route.params.st_lx != '5'">
      <div class="container">
        <ul class="ul-tabs main-tabs mt-24">
          <!--设计如此。。-->
          <li class="c-0084b3">答题统计</li>
          <li @click="gojxst">试卷解析</li>
        </ul>
      </div>
      <div style="height: 10px; background-color: #0084b3" class="mt-10"></div>
      <div class="container mt-12">
        <div class="main bg-fff">
          <div class="mt-34 text-center">
            <p class="fz45 c-a5a5a5 l-height1">答题统计</p>
            <p class="fz20 c-e5e5e5">-----RESULT-----</p>
            <p class="fz20 mt-24">{{ paper_info.sj_name }}</p>
          </div>
          <div class="panel-hr2 mt-24"></div>
          <!--得分信息-->
          <div class="mt-26 text-center">
            <div class="inline-block">
              <p class="fz14">本次成绩</p>
              <div class="fz100 l-height1 inline-block c-ff9800">
                {{ exam_result.df }}<span class="fz12 c-888">分</span>
              </div>
            </div>
            <div class="inline-block" style="margin-left: 150px">
              <p class="fz14 text-left" style="padding-left: 16px">超越</p>
              <div class="fz100 l-height1 inline-block c-8bc34a">
                {{ exam_result.surpass }}<span class="fz12 c-888">%的学员</span>
              </div>
            </div>
            <Row
              class="fz14 p-panel"
              style="
                width: 600px;
                margin: 20px auto 0;
                padding: 14.5px;
                background-color: #f9f9f9;
              "
            >
              <Col span="6">
                <p>总题数</p>
                <p class="fz40 c-5e5e5e">
                  {{ exam_result.zts }}<span class="fz12">道</span>
                </p>
              </Col>
              <Col span="6">
                <p>答对题</p>
                <p class="fz40 c-5e5e5e">
                  {{ exam_result.right_ts }}<span class="fz12">道</span>
                </p>
              </Col>
              <Col span="6">
                <p>总分</p>
                <p class="fz40 c-5e5e5e">
                  {{ exam_result.zf }}<span class="fz12">分</span>
                </p>
              </Col>
              <Col span="6">
                <p>实际用时</p>
                <p class="fz40 c-5e5e5e">
                  {{ (exam_result.yy_sc / 60).toFixed(2)
                  }}<span class="fz12">分钟</span>
                </p>
              </Col>
            </Row>
          </div>
          <!--card-->
          <div class="mt-28 exam-Q-count">
            <div v-if="single_Q_rst.length !== 0">
              <p class="fz14 letter-1">
                1、单项选择题
                <!--<span class="c-bbb fz12" >（得分：??分 , 总分：??分）</span>-->
              </p>
              <ul class="ul-tabs Q-index-list">
                <li
                  v-for="(item, index) in single_Q_rst"
                  :key="index"
                  :class="{
                    success: item.yxda.length !== 0 && item.dc === '对',
                    error: item.yxda.length !== 0 && item.dc === '错',
                  }"
                >
                  {{ item.xh }}
                </li>
              </ul>
            </div>
            <div
              v-if="multiple_Q_rst.length !== 0"
              :class="{ 'mt-26': single_Q_rst.length !== 0 }"
            >
              <p class="fz14 letter-1">
                2、多项选择题
                <!--<span class="c-bbb fz12">（得分：??分 , 总分：??分）</span>-->
              </p>
              <ul class="ul-tabs Q-index-list">
                <li
                  v-for="(item, index) in multiple_Q_rst"
                  :key="index"
                  :class="{
                    success: item.yxda.length !== 0 && item.dc === '对',
                    error: item.yxda.length !== 0 && item.dc === '错',
                  }"
                >
                  {{ item.xh }}
                </li>
              </ul>
            </div>
            <div
              v-if="stuff_Q_rst.length !== 0"
              :class="{
                'mt-26':
                  single_Q_rst.length !== 0 && multiple_Q_rst.length !== 0,
              }"
            >
              <p class="fz14 letter-1">
                3、材料题
                <!--<span class="c-bbb fz12">（得分：??分 , 总分：??分）</span>-->
              </p>
              <ul class="ul-tabs Q-index-list">
                <li
                  v-for="(item, index) in stuff_Q_rst"
                  :key="index"
                  :class="{ 'bg-0084B3': item.yxda.length !== 0 }"
                >
                  {{ item.xh }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mk-rote" v-else>
      <div class="nav-top">首页>题库>一级建造师>万人模考</div>
      <div class="mk-con">
        <div class="rote-progress">
          <div class="prog">
            <re-progress
              :percentage="Number(exam_result.data.df)"
            ></re-progress>
          </div>
          <ul class="pro-ul" v-if="wr_obj.major!='建筑'&&wr_obj.major!='市政'">
            <li class="pro-li">
              <span>当前排名</span>
              <span style="color: #21bdca">{{
                (exam_result.data.pm + "").padStart(2, "0")
              }}</span>
            </li>
            <li class="pro-li">
              <span>平均得分</span>
              <span style="color: #eb5757">{{
                exam_result.data.average.toFixed(1)
              }}</span>
            </li>
            <li class="pro-li">
              <span>正确率</span>
              <span style="color: #5372e7">{{ exam_result.data.zql }}%</span>
            </li>
          </ul>
        </div>
        <!-- v-if="phDatas.length != 0" -->
        <div v-if="phDatas.length != 0&&wr_obj.major!='建筑'&&wr_obj.major!='市政'">
          <!-- 排行榜列表 -->
          <div class="rote-ph">
            <div class="title">
              <div class="left">
                <a></a>
                <span>排行榜</span>
              </div>
              <div class="right">我的奖品：参与奖（电子版历年真题）</div>
            </div>

            <ul class="ph-ul" v-if="phDatas.length != 0 ">
              <li class="ph-li">
                <div class="span">排名</div>
                <div class="span">手机号</div>
                <div class="span">分数</div>
              </li>
              <li class="ph-li" v-for="(item, index) of phDatas" :key="index">
                <div class="span">
                  <span>
                    <img
                      v-show="index == 0"
                      src="../../wan/imgs/ic_wrmk_dym@2x.png"
                      alt=""
                    />
                    <img
                      v-show="index == 1"
                      src="../../wan/imgs/ic_wrmk_dem@2x.png"
                      alt=""
                    />
                    <img
                      v-show="index == 2"
                      src="../../wan/imgs/ic_wrmk_dsm@2x.png"
                      alt=""
                    />
                  </span>
                  <span>{{ (index + 1 + "").padStart(2, "0") }}</span>
                </div>
                <div class="span">{{ item.user_name }}</div>
                <div class="span">{{ item.zdf }}</div>
              </li>
            </ul>

            <div class="ph-div" v-else>
              <div class="nodata">
                <img src="../../wan/imgs/pic_kong@2x.png" alt="" />
                <span>暂无排名</span>
              </div>
            </div>
          </div>
          <!-- 参赛奖品 -->
          <div class="csjp-ph">
            <div class="title">
              <div class="left">
                <a></a>
                <span>参赛奖品</span>
              </div>
            </div>
            <div class="ph-context">
              <ul class="ph-img">
                <li
                  v-for="(item, index) of imgList"
                  :key="index"
                  class="img-li"
                >
                  <img :src="item" alt="" />
                </li>
              </ul>
            </div>
            <div class="ph-ma">
              <p>请关注【中课】公众号，领取获奖奖品。</p>
              <img
                class="imgs"
                src="../../wan/imgs/ic_wrmk_down@2x.png"
                alt=""
              />
              <img class="imga" src="../../wan/imgs/wrmk_ewm@2x.png" alt="" />
              <span>中课公众号</span>
            </div>
          </div>
        </div>

        <div v-else>
          <div class="no-da">
            <div v-if="wr_obj.major!='建筑'&&wr_obj.major!='市政'">
              <div  class="to-icon">
              <img src="../../wan/imgs/ic_tk_jg_ts@2x.png" alt="" />
              <span>排行榜将于明天早上8:00公布！</span>
            </div>
             </div>
            <p v-if="wr_obj.major!='建筑'&&wr_obj.major!='市政'" class="no-p">
              请关注【中课】公众号，及时关注排行榜获奖信息和直播解答安排
            </p>
              <p v-else class="no-p">
              请关注【中课】公众号，及时关注直播解答安排
            </p>
            <img class="rowt" src="../../wan/imgs/ic_wrmk_down@2x.png" alt="" />
            <img class="no-imga" src="../../wan/imgs/wrmk_ewm@2x.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import reProgress from "./rale.vue";
export default {
  components: {
    reProgress
  },
  props: {
    paper_info: {
      type: Object,
      require: true
    },
    exam_result: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      wr_obj: {},
      gbQuest: {
        //公布成绩时间
        jTime: "2021-08-13 08:00:00",
        // fTime: "2021-07-14 08:00:00",
        fTime: "2021-08-14 08:00:00",
        gTime: "2021-08-15 08:00:00",
        sTime: "2021-08-16 08:00:00",
        // zTime: "2021-07-16 08:00:00",
        zTime: "2021-08-16 08:00:00"
      },
      showGb: {
        //是否显示公布的成绩
        showJ: false,
        showF: false,
        showG: false,
        showS: false,
        showZ: false
      },
      dfData: {},
      imgList: [
        require("../../wan/imgs/jpzs_diyi@2x.png"),
        require("../../wan/imgs/jpzs_dier@2x.png"),
        require("../../wan/imgs/jpzs_disan@2x.png"),
        require("../../wan/imgs/jpzs_canyu@2x.png")
      ],
      phDatas: [],
      mkdata: true,
      single_Q_rst: null,
      multiple_Q_rst: null,
      stuff_Q_rst: null,
      //相关习题
      other_paper_list: null
    };
  },
  filters: {
    phonrFil(num) {
      let arr = num.split("");
      arr.splice(3, 4, "****");
      let str = arr.join("");
      return str;
    }
  },
  methods: {
    // 万人模考报名
    dryrunList() {
      let obj = {
        lb_id: this.wr_obj.lb_id,
        token: this.$store.state.$user.token,
        kmlb: this.wr_obj.kmlb,
        sj_id: this.wr_obj.id
      };
      this.$api.paper.dryrunList(obj).then(res => {
        if (res.data.event == "100") {
          this.dfData = res.data.data;
          this.phDatas = res.data.list;
        }
      });
    },
    // proFormat(percentage) {
    //   return "90 得分";
    // },
    gojxst() {
      this.$router.push(
        {
          name: "paperExplain",
          params: {
            product_id: this.paper_info.lb_id,
            paper_id: this.paper_info.paper_id || this.paper_info.sj_id,
            practise_id: this.paper_info.xl_id
          }
        }
        // `/paper_explain/${paper_info.lb_id}/${paper_info.paper_id}/${paper_info.xl_id}`
      );
    },
    // clearRate(item) {
    //   this.$router.push(`/paper_exam/${item.lb_id}/${item.id}`);
    //   this.$emit("clearexam");
    // },
    init_Q_rst() {
      const single_Q_rst = [],
        multiple_Q_rst = [],
        stuff_Q_rst = [];
      this.exam_result.cards.map(v => {
        switch (v.tx) {
          case "1":
            single_Q_rst.push(v);
            break;
          case "2":
            multiple_Q_rst.push(v);
            break;
          case "3":
            stuff_Q_rst.push(v);
            break;
        }
      });
      this.single_Q_rst = single_Q_rst;
      this.multiple_Q_rst = multiple_Q_rst;
      this.stuff_Q_rst = stuff_Q_rst;
    },
    init_other_paper() {
      this.$api.paper
        .list({
          page: 1,
          size: 8,
          lb: this.paper_info.lb_id,
          kmlb: "",
          sj_lx: "", //转换字段,原为 sj_lx
          sort: "hots"
        })
        .then(rst => {
          this.other_paper_list = rst.data.list || [];
        });
    },
    fwTime() {
      let obj = {
        token: this.$store.state.$user.token || ""
      };
      this.$api.paper.getTimeStamp(obj).then(res => {
        let dayD = new Date(res.data.service_time * 1000);
        let y = dayD.getFullYear();
        let m = (dayD.getMonth() + 1 + "").padStart(2, "0");
        let d = (dayD.getDate() + "").padStart(2, "0");
        let h = (dayD.getHours() + "").padStart(2, "0");
        let mm = (dayD.getMinutes() + "").padStart(2, "0");
        let s = (dayD.getSeconds() + "").padStart(2, "0");
        let str = `${y}-${m}-${d} ${h}:${mm}:${s}`;
        this.cjShow(str);
      });
    },
    // 公布成绩判定
    cjShow(data) {
      this.dryrunList();
      // this.showGb.showJ = moment(data).isAfter(this.gbQuest.jTime); //经济
      // this.showGb.showF = moment(data).isAfter(this.gbQuest.fTime); //法规
      // this.showGb.showG = moment(data).isAfter(this.gbQuest.gTime); //管理
      // this.showGb.showS = moment(data).isAfter(this.gbQuest.sTime); //市政
      // this.showGb.showZ = moment(data).isAfter(this.gbQuest.zTime); //建筑
      // if (this.$route.params.st_lx == "5") {
      //   if (this.showGb.showJ && this.wr_obj.major == "经济") {
      //     this.dryrunList();
      //   } else if (this.showGb.showF && this.wr_obj.major == "法规") {
      //     this.dryrunList();
      //   } else if (this.showGb.showG && this.wr_obj.major == "管理") {
      //     this.dryrunList();
      //   } else if (this.showGb.showS && this.wr_obj.major == "市政") {
      //     this.dryrunList();
      //   } else if (this.showGb.showZ && this.wr_obj.major == "建筑") {
      //     this.dryrunList();
      //   }
      // }
    }
  },

  created() {
    this.wr_obj = JSON.parse(sessionStorage.getItem("wrObj"));
    this.fwTime();
    if (this.$route.params.st_lx !== "5") {
      this.init_Q_rst();
    }
  }
};
</script>

<style scoped lang="scss">
.out-margin {
  margin-top: 0;
}
.main-tabs {
  li {
    margin-right: 28px;
    padding: 4.5px 58px 6.5px 40px;
    font-size: 16px;
    cursor: pointer;
    &:not(:last-child) {
      border-right: 1px solid #bbb;
    }
  }
}

.main {
  padding: 20px;
  .exam-Q-count {
    padding: 20px 36px;
    border: 1px dashed #ccc;
    .Q-index-list {
      li {
        display: inline-block;
        width: 35px;
        height: 35px;
        line-height: 35px;
        margin-top: 16px;
        margin-right: 12px;
        color: #fff;
        background-color: #d2d2d2;
        text-align: center;
        border-radius: 3px;
        cursor: pointer;
        &:nth-child(5n) {
          margin-right: 42px;
        }
        &.success {
          background-color: #6dc76f;
        }
        &.error {
          background-color: #ff8f8f;
        }
      }
    }
  }
}

//
.other-paper-panel {
  padding: 18px 20px;
  .list {
    li {
      width: 268px;
      margin-bottom: 14px;
      padding: 13px;
      border-radius: 5px;
      background-color: rgba(249, 249, 249, 1);
      &:not(:nth-child(4n)) {
        margin-right: 29px;
      }
      .icon {
        font-size: 80px;
        float: left;
      }
      .exam-btn {
        right: 13px;
        bottom: 14px;
        padding: 1px 19px;
      }
    }
  }
}
.h-top {
  margin: 0;
}
.mk-rote {
  width: 1240px;
  margin: 10px auto;
  .nav-top {
    margin: 10px 0;
  }
  .mk-con {
    width: 1240px;
    background: #ffffff;
    padding: 33px 25px 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .rote-progress {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .pro-ul {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
        .pro-li {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 94px;
          height: 78px;
          background: #ffffff;
          box-shadow: 10px 24px 54px 0px rgba(51, 51, 51, 0.04);
          border-radius: 10px;
          &:nth-child(2) {
            margin: 0 16px;
          }
          span {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 0.5);
            line-height: 20px;
            &:first-child {
              margin-bottom: 8px;
            }
          }
        }
      }
      ::v-deep.prog {
        // width: 160px;
        // height: 160px;
        // .progress--circle{
        //   margin: 0;
        // }
        .el-progress__text {
          color: red;
          // height: 30px;
          // line-height: 30px;
          font-size: 30px !important;
        }
      }
    }
    .no-da {
      margin-top: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .to-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        img {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
        span {
          height: 33px;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 33px;
        }
      }
      .no-p {
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 25px;
      }
      .rowt {
        width: 24px;
        margin: 14px 0 12px;
      }
      .no-imga {
        width: 154px;
      }
    }
    .rote-ph,
    .csjp-ph {
      width: 100%;
      margin-top: 40px;
      .title {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          a {
            width: 4px;
            height: 25px;
            background: #ff6900;
            margin-right: 10px;
          }
          span {
            height: 33px;
            font-size: 24px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 33px;
          }
        }
        .right {
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 25px;
        }
      }

      .ph-ul {
        margin-top: 20px;
        min-height: 572px;
        .ph-li {
          display: flex;
          align-items: center;
          justify-content: center;
          &:nth-child(2n + 1) {
            background: #f3f4f5;
          }

          .span {
            flex: 1;
            height: 52px;
            text-align: center;
            line-height: 52px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            span:first-child {
              width: 40px;
              margin-left: -60px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 24px;
              img {
                width: 100%;
                height: 100%;
                vertical-align: middle;
              }
            }
          }

          &:first-child {
            .span {
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(51, 51, 51, 0.5);
            }
          }
        }
      }
      .ph-div {
        margin-top: 20px;
        min-height: 572px;
        display: flex;
        align-items: center;
        justify-content: center;
        .nodata {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          img {
            width: 320px;
            margin-bottom: 20px;
          }
          span {
            height: 28px;
            font-size: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
          }
        }
      }
    }
    .csjp-ph {
      .ph-context {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 20px;
        .ph-img {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;

          li {
            width: 500px;
            &:nth-child(2n + 1) {
              margin-right: 115px;
            }
            &:nth-child(2),
            &:nth-child(1) {
              margin-bottom: 25px;
            }

            img {
              width: 100%;
            }
          }
        }
      }

      .ph-ma {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 40px;
        p {
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 25px;
          margin-bottom: 40px;
        }
        .imgs {
          width: 24px;
          height: 24px;
          margin-bottom: 12px;
        }
        .imga {
          width: 154px;
        }
        span {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>
